<template>
  <div id="itemlist">
    <h1
      style="text-align: center; margin-top: 10px; margin-bottom: 10px"
      v-show="!$store.state.ylist.length && !$store.state.nlist.length"
    >
      无数据
    </h1>
    <img
      v-show="!$store.state.ylist.length && !$store.state.nlist.length"
      class="nopage"
      src="../assets/404.png"
      alt=""
    />

    <div v-show="$store.state.ylist.length || $store.state.nlist.length">
      <div class="itemtite">
        <div>进行中</div>
        <div style="width: 18px; height: 18px">
          <img
            src="../assets/next.png"
            mode=""
            :style="{ transform: ising ? 'rotate(90deg)' : 'rotate(180deg)' }"
            @click="switching"
          />
        </div>
      </div>
      <ul :style="{ height: ising ? 'auto' : '0' }">
        <li v-for="item in $store.state.nlist" :key="item.id">
          <img class="btn" :src="ing" alt="" @click="switchstate(item.id, 1)" />
          <span
            class="itemname"
            :style="{
              color: 'black',
              'text-decoration': 'none',
            }"
            >{{ item.name }}</span
          >
          <img
            src="../assets/计时.png"
            mode=""
            class="btn"
            @click="timestart(item)"
          />
          <img
            class="btn"
            src="../assets/编辑.png"
            alt=""
            @click="edititem(item.id, item.name)"
          />
          <img
            class="btn"
            src="../assets/回收站.png"
            alt=""
            @click="delitem(item.id)"
          />
        </li>
      </ul>
      <div class="itemtite">
        <div>已完成</div>
        <div style="width: 18 px; height: 18px">
          <img
            src="../assets/next.png"
            mode=""
            :style="{
              transform: isfinish ? 'rotate(90deg)' : 'rotate(180deg)',
            }"
            @click="switchfinish"
          />
        </div>
      </div>
      <ul :style="{ height: isfinish ? 'auto' : '0' }">
        <li v-for="item in $store.state.ylist" :key="item.id">
          <img class="btn" :src="com" alt="" @click="switchstate(item.id, 0)" />
          <span
            class="itemname"
            :style="{
              color: 'gray',
              'text-decoration': 'line-through',
            }"
            >{{ item.name }}</span
          >
          <span style="color: gray; font-size: 14px">{{
            `${parseInt(item.time / 3600)}时${parseInt(
              (item.time / 60) % 60
            )}分${Math.ceil(item.time % 60)}秒`
          }}</span>
          <img
            class="btn"
            src="../assets/回收站.png"
            alt=""
            @click="delitem(item.id)"
          />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import ing from '../assets/ing.png';
import com from '../assets/com.png';
export default {
  data() {
    return {
      ing: ing,
      com: com,
      ising: true,
      isfinish: true,
    };
  },
  props: ['selectdate'],
  methods: {
    switching() {
      this.ising = !this.ising;
    },
    switchfinish() {
      this.isfinish = !this.isfinish;
    },

    async getItems() {
      let datetime;
      if (!this.selectdate) {
        let now = new Date();
        datetime = `${now.getFullYear()}-${
          now.getMonth() + 1
        }-${now.getDate()}`;
      } else {
        datetime = this.selectdate;
      }
      let res = await this.axios.get('/item/search', {
        params: { key: '', datetime },
      });
      let itemlist = res.data.data;

      itemlist.n.items.forEach((e) => {
        if (Number(e.ingstate)) {
          this.iteming = e;
          let time = e.time;
          let h = parseInt(time / 3600);
          let m = parseInt((time / 60) % 60);
          let s = Math.ceil(time % 60);
          let hours = h < 10 ? '0' + h : h;
          let minute = m < 10 ? '0' + m : m;
          let second = s > 59 ? 59 : s < 10 ? '0' + s : s;
          this.h = hours;
          this.m = minute;
          this.s = second;
        }
      });
      this.$store.commit('GetItemList', {
        y: itemlist.y.items,
        n: itemlist.n.items,
      });
      let { data } = await this.axios.get('/user/getuser');
      let user = data.data[0];
      this.$store.commit('GetUser', user);
    },
    switchstate(id, state) {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth();
      let day = date.getDate();
      let datetime = `${year}-${month + 1}-${day}`;
      this.axios
        .post('/item/switchstate', { id, state, datetime })
        .then((res) => {
          if (res.data.msg == '修改成功') {
            this.getItems();
          }
        })
        .catch((err) => {
          alert('出现了未知错误');
        });
    },
    delitem(id) {
      this.axios.get(`/item/delete/${id}`).then((res) => {
        if (res.data.status == 200) {
          alert('删除成功');
          this.getItems();
        }
      });
    },
    edititem(id, name) {
      this.$emit('edit', id, name);
    },
    async timestart(e) {
      let id = e.id;
      let res = await this.axios.post('/item/action', { id });
      if (res.data.status == 200) {
        this.$emit('itemstart', e);
      }
    },
  },
};
</script>

<style scoped>
#itemlist {
  width: 70%;
  text-align: center;
}
ul {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
li {
  box-sizing: border-box;
  width: 100%;
  list-style: none;
  padding: 15px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
img.btn {
  width: 30px;
  height: 30px;
  margin-right: 20px;
  cursor: pointer;
}
.nopage {
  width: 200px;
  height: 200px;
}
.itemname {
  display: inline-block;
  width: 60%;
  margin-right: 0 70px;
}
.itemtite {
  border-radius: none;
  font-weight: bolder;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background-color: rgb(245, 245, 245);
  margin-top: 15px;
  padding: 0 15px;
}

img {
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}
</style>
